<template>
	<view class="">
		<!-- <view class="" style="height: 177rpx;">
			<u-navbar title="建房">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view> -->
		<view class="liucheng d-flex align-items justify-content-center">
			<view class="search">
				<u-search placeholder="请输入要查询的内容" placeholderColor="#C9CDD4" :actionStyle="actionStyle" shape="square"
					v-model="keyword" @search="search"></u-search>
			</view>
		</view>
		<view class="w-690">
			<view class="dq-01 shaixuanselect">
				<view class="d-flex align-items shaixuanselect-title" @click="shaixuan_show = !shaixuan_show">
					<image src="../../pagesA/static/shaixuan.png" class="shaixuan_logo" mode="widthFix"></image>
					<view class="">{{shi_name ? shi_name : '筛选'}}</view>
					<image class="sanjiao" src="../../static/jianfang/down.png" mode="widthFix"></image>
				</view>
				<view class="shaixuanselect-content" v-show="shaixuan_show" style="left: 0; right: auto;">
					<view class="clear_pop">
						<image src="../../static/jianfang/sanjiao.png" mode="widthFix" class="sj"></image>
						<view class="all" @click="clear_shaixuan">全部</view>
						<view class="d-flex align-items justify-content-space-between diqu_chos" @click="chooseSchool">
							<view class="diqu_sx">{{shi_name ? shi_name : '选择地区'}}</view>
							<image src="../../static/index/more.png" class="choose_img" mode="widthFix"></image>
						</view>
					</view>
				</view>

			</view>
			<view class="scroll-view-item_H" @click="go_jianfang(company)" v-for="(company,index) in companyLists"
				:key="index">
				<view class="d-flex gs-list">
					<view class="">
						<image class="touxiang-img" v-if="company.avatar_url" :src="company.avatar_url" mode=""></image>
						<image class="touxiang-img" v-else src="/static/my/moren.png" mode=""></image>
					</view>
					<view class="">
						<view class="name-t">{{company.company_name}}</view>
						<view class="company-t d-flex align-items" v-if="company.company_cityname">
							<image class="dwImg" src="../../static/jianfang/dw.png" mode="widthFix"></image>
							{{company.company_cityname}} {{company.company_areaname}}
						</view>
					</view>
				</view>
				<view class="geyan">{{company.company_jieshao == null ? '' : company.company_jieshao}}</view>
				<view class="">
					<image class="image_zhutu" v-if="company.anli.zhutu_firsturl" :src="company.anli.zhutu_firsturl" mode=""></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		userinfolist,
	} from '@/api/user.js'
	export default {
		data() {
			return {
				keyword: '',
				shaixuan_show: false,
				actionStyle: {
					color: '#FF6400',
					fontSize: '30rpx',
				},
				companyLists: [],
				page: 1,
				limit: 7,
				shi_name: '',
				shi_id: '',
			}
		},
		onLoad() {

		},
		onShow() {
			this.shi_name = uni.getStorageSync('shi_name')
			console.log("市区");
			this.shi_id = uni.getStorageSync('shi_id')
			this.get_jianfang()
		},
		onReachBottom() {
			this.page++
			this.get_jianfang()
		},
		onPullDownRefresh() {
			this.page = 1
			this.get_jianfang()
		},
		methods: {
			// 清楚筛选
			clear_shaixuan() {
				this.shi_name = ''
				this.shi_id = ''
				uni.setStorageSync('shi_id', '')
				uni.setStorageSync('shi_name', '')
				this.get_jianfang()
				this.shaixuan_show = false
			},
			// 获取建房列表
			get_jianfang() {
				var data = {
					group_id: '6',
					key: this.keyword,
					city_id: this.shi_id,
					page: this.page,
					limit: this.limit,
				}
				userinfolist(data).then(res => {
					console.log("获取建房信息列表", res);
					if (res.code == 1) {
						if (this.page == 1) {
							this.companyLists = res.data.list
						} else {
							this.companyLists = this.companyLists.concat(res.data.list)
						}
						uni.stopPullDownRefresh()
					}
				})
			},
			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			search(e) {
				console.log("eaa", e);
				this.get_jianfang()
				this.page = 1
			},
			chooseSchool() {
				uni.navigateTo({
					url: '/pages/jianfang/xuanze_diqu'
				})
				this.shaixuan_show = false
			},
			go_jianfang(e) {
				uni.navigateTo({
					url: '/pagesA/index_top/jianfang_detail?id=' + e.group_id + '&user_id=' + e.user_id
				})
			},
		}
	}
</script>

<style>
	.image_zhutu{
		width: 650rpx;
		display: block;
		margin: 10rpx auto;
		border-radius: 8rpx;
	}
	.sj {
		width: 50rpx;
		display: block;
		position: absolute;
		top: -28rpx;
		left: 50rpx;
	}

	.diqu_chos {
		padding: 20rpx 0;
	}

	.choose_img {
		width: 13rpx;
		display: block;
	}

	.all {
		font-size: 28rpx;
		color: #333;
		border-bottom: 1px solid #f5f5f5;
		padding: 20rpx 0 20rpx 0;
	}

	.clear_pop {
		width: 300rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 14rpx 0rpx #eee;
		padding: 0rpx 20rpx;
		border-radius: 8rpx;
		position: relative;
		margin-top: 24rpx;
	}

	.shaixuan_logo {
		width: 40rpx;
		height: 45rpx;
		display: block;
		margin-right: 8rpx;
	}
	

	.gs-list {
		width: 640rpx;
		margin: auto;
		padding-top: 30rpx;
	}

	.geyan {
		width: 640rpx;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 42rpx;
		color: #333333;
		margin: auto;
		margin-top: 25rpx;
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
	}

	.company-t {
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
		margin-left: 10rpx;
	}

	.name-t {
		font-size: 32rpx;
		font-weight: 600;
		color: #1C2023;
		margin-left: 10rpx;
	}

	.touxiang-img {
		width: 80rpx;
		height: 80rpx;
		display: block;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.scroll-view-item_H {
		width: 690rpx;
		padding-bottom: 20rpx;
		border-radius: 10rpx;
		background: #fff;
		margin: 20rpx auto;
	}

	.dwImg {
		width: 32rpx;
		display: block;
	}

	.dq-01 {
		margin-top: 30rpx;
	}

	.diqu_sx {
		font-size: 28rpx;
		color: #333;
	}

	.sanjiao {
		width: 40rpx;
		display: block;
	}

	.search {
		width: 690rpx;
		margin: auto;
	}

	.liucheng {
		width: 750rpx;
		height: 102rpx;
		background-color: #fff;
		margin-top: 2px;
	}

	page {
		background-color: #F7F8FB;
		padding-bottom: 70rpx;
	}
</style>